<template>
	<view class="page_pet_goods diy_list diy_list_page" id="pet_goods_list">
		<!-- 筛选模块(开始) -->
		<mm_warp>
			<mm_container class="container">
				<mm_row>
					<mm_col>
						<mm_view class="">
							<!-- 搜索栏 -->
							<uni-search-bar placeholder="搜索物品名称" @confirm="search" @cancel="cancel" cancelText="取消"
											@input="input($event, 'item_name')">
								<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
							</uni-search-bar>
							<!-- /搜索栏 -->
						</mm_view>
					</mm_col>
				</mm_row>

				<mm_row>
					<mm_col>
						<mm_view class="tab_view">
							<!-- 筛选栏 -->
							<!--<list_tab activeColor="var(&#45;&#45;color_primary)" lineColor="var(&#45;&#45;color_primary)" :list="list_suitable_for_pets"-->
									  <!--v-model="query['suitable_for_pets']" @change="changeScreen('suitable_for_pets')" field="pet_species"></list_tab>-->
							<label>适用宠物</label>
							<select style="width: 100px" v-model="query['suitable_for_pets']" class="query_select" @change="changeScreen('suitable_for_pets')" >
								<option class="query_option" value="">全部</option>
								<option class="query_option" v-for="(o,i) in list_suitable_for_pets" :value="o.pet_species">{{o.pet_species}}</option>
							</select>
							<!-- /筛选栏 -->
						</mm_view>
					</mm_col>
				</mm_row>

				<mm_row>
					<mm_col>
						<mm_view class="sort_view">
							<!-- 排序 -->
							<view class="list_orderby">
								<bar_orderby :text="o.name" v-model:direction="o.direction"
											 v-for="(o,i) in list_orderby" :key="i" @handle="handleOrderby">
								</bar_orderby>
							</view>
							<!-- /排序 -->
						</mm_view>
					</mm_col>
				</mm_row>
			</mm_container>
		</mm_warp>
		<!-- 筛选模块(结束) -->
		<!-- 列表 -->
		<view class="change_table">
			<button class="btn btn-primary btn_change_table" @click="show_Img = !show_Img">
				{{ show_Img ? "切换成表格" : "切换成视图" }}
			</button>
		</view>

		<view v-show="!show_Img">
			<uni-table stripe border emptyText="暂无更多数据">
				<uni-tr>
					<uni-th v-if="$check_field('get','item_name')" align="center">
						<span>物品名称
						</span>
					</uni-th>
					<uni-th v-if="$check_field('get','suitable_for_pets')" align="center">
						<span>适用宠物
						</span>
					</uni-th>
					<uni-th v-if="$check_field('get','item_picture')" align="center">
						<span>物品图片
						</span>
					</uni-th>
					<uni-th v-if="$check_field('get','item_introduction')" align="center">
						<span>物品介绍
						</span>
					</uni-th>
					<uni-th v-if="$check_field('get','usage_method')" align="center">
						<span>使用方法
						</span>
					</uni-th>
					<uni-th align="center">
						<span>
							点赞
						</span>
					</uni-th>
					<uni-th align="center">
						<span>
							点击数
						</span>
					</uni-th>
					<uni-th align="center">
						<span>
							创建时间
						</span>
					</uni-th>
					<uni-th align="center">
						<span>
							操作
						</span>
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(o, i) in list" :key="i">
					<uni-td v-if="$check_field('get','item_name')" class="diy_field diy_text" align="center">
						<span>
							{{ o["item_name"] }}
						</span>
					</uni-td>
					<uni-td v-if="$check_field('get','suitable_for_pets')" class="diy_field diy_text" align="center">
						<span>
							{{ o["suitable_for_pets"] }}
						</span>
					</uni-td>
					<uni-td v-if="$check_field('get','item_picture')" class="diy_field diy_img" align="center">
						<image style="width:4rem;height: 4rem;" :src="$fullUrl(o['item_picture']) || '/static/img/default.png'" mode="scaleToFill" />
					</uni-td>
					<uni-td v-if="$check_field('get','item_introduction')" class="diy_field diy_text" align="center">
						<span>
							{{ o["item_introduction"] }}
						</span>
					</uni-td>
					<uni-td v-if="$check_field('get','usage_method')" class="diy_field diy_text" align="center">
						<span>
							{{ o["usage_method"] }}
						</span>
					</uni-td>
					<uni-td class="diy_field diy_number" align="center">
						<span>
							{{ o["praise_len"] }}
						</span>
					</uni-td>
					<uni-td class="diy_field diy_number" align="center">
						<span>
							{{ o["hits"] }}
						</span>
					</uni-td>
					<uni-td class="diy_field diy_time" align="center">
						<span>
							{{ $toTime(o["create_time"],"yyyy-MM-dd hh:mm:ss") }}
						</span>
					</uni-td>
					<uni-td align="center">
						<view @click="to_nav(o['pet_goods_id'])" style="cursor: pointer;">查看详情</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<view class="warp" v-show="show_Img">
			<view class="container">
				<view v-for="(o,i) in list" class="row box_style">
					<view class="col" v-if="1 && $check_field('get','item_name')">
						<view class="view">
							<view class="diy_title" v-if="true">
								<span>物品名称</span>
							</view>
							<view class="diy_field diy_text">
								<span>
									{{ o["item_name"] }}
								</span>
							</view>
						</view>
					</view>
					<view class="col" v-if="1 && $check_field('get','suitable_for_pets')">
						<view class="view">
							<view class="diy_title" v-if="true">
								<span>适用宠物</span>
							</view>
							<view class="diy_field diy_text">
								<span>
									{{ o["suitable_for_pets"] }}
								</span>
							</view>
						</view>
					</view>
					<view class="col" v-if="1 && $check_field('get','item_picture')">
						<view class="view">
							<view class="diy_title" v-if="false">
								<span>物品图片</span>
							</view>
							<view class="diy_field diy_img">
								<img :src="$fullUrl(o['item_picture'])" width="100%" height="100" />
							</view>
						</view>
					</view>
					<view class="col" v-if="0 && $check_field('get','item_introduction')">
						<view class="view">
							<view class="diy_title" v-if="true">
								<span>物品介绍</span>
							</view>
							<view class="diy_field diy_text">
								<span>
									{{ o["item_introduction"] }}
								</span>
							</view>
						</view>
					</view>
					<view class="col" v-if="0 && $check_field('get','usage_method')">
						<view class="view">
							<view class="diy_title" v-if="true">
								<span>使用方法</span>
							</view>
							<view class="diy_field diy_text">
								<span>
									{{ o["usage_method"] }}
								</span>
							</view>
						</view>
					</view>
					<view class="bottom-view">
						<view class="praise-title">点赞数<span>{{ o["praise_len"] }}</span></view>
						<view class="hits-title">点击数<span>{{ o["hits"] }}</span></view>
					</view>
					<view class="col">
						<view class="view">
							<view class="create_time_block diy_filed diy_time">
								{{ $toTime(o["create_time"] ,"yyyy-MM-dd hh:mm:ss") }}
							</view>
						</view>
					</view>
					<view class="uni-padding-wrap uni-common-mt">
						<a :href="'./details?pet_goods_id=' + o['pet_goods_id']" class="btn btn-primary">查看详情</a>
					</view>
				</view>
			</view>
		</view>
		<!-- /列表 -->

		<!-- 分页器 -->
		<uni-pagination class="pager" show-icon="true" :total="count" :pageSize="query.size" :current="query.page"
						@change="page_change"></uni-pagination>
		<!-- /分页器 -->
	</view>
</template>

<script>
	import list_tab from "@/components/diy/list_tab.vue";
	import bar_orderby from "@/components/diy/bar_orderby.vue";
	import mixin from "@/mixins/page.js";

	export default {
		mixins: [mixin],
		components: {
			list_tab,
			bar_orderby
		},
		data() {
			return {
				url_get_list: "~/api/pet_goods/get_list?like=0",
				show_Img: true,
				//适用宠物选项列表
				list_suitable_for_pets: [],

					list_orderby: [
				{
					name: '点赞数',
					direction: "",
					command_asc: '`praise_len` asc',
					command_desc: '`praise_len` desc'
				},
				{
					name: '点击数',
					direction: "",
					command_asc: '`hits` asc',
					command_desc: '`hits` desc'
				},
				{
					name: '发布时间',
					direction: "",
					command_asc: '`create_time` asc',
					command_desc: '`create_time` desc'
				}
			],
					query: {
						"item_name": "", // 物品名称
						"suitable_for_pets": "", // 适用宠物
						"pet_goods_id": 0, // ID
						"page": 1,
						"size": 10
			},
			list: [],
					count: 50,
		}
		},
		methods: {
	/**
	 * 获取列表后
	 * @param {Object} json
	 * @param {Object} func
	 */
	get_list_after(json ,func){
		var list = json.result.list;
		// list.map((o)=>{
		// 	o["praise_len"] = 0;
		// });
		this.get_praise(list);

		if (func) {
			func(json);
		}
	},

	/**
	 * 获取点赞数
	 * @param {Object} list
	 */
	get_praise(list){
		this.$get("~/api/praise/count_group?groupby=source_id&source_table=pet_goods", {}, (res) => {
			if(res.result){
				res.result.map((o)=>{
					for(var i = 0;i < list.length; i++){
						var oj = list[i];
						if(oj["pet_goods_id"] === o["source_id"]){
							oj["praise_len"] = o["count"];
							break;
						}
					}
				});
			}
			else if(res.error) {
				console.error(res.error);
			}
		});
	},
	/**
	 * 获取适用宠物列表
	 */
	async get_list_suitable_for_pets() {
		var json = await this.$get("~/api/pet_species/get_list?");
		if(json.result && json.result.list){
			this.list_suitable_for_pets = json.result.list;
		}
		else if(json.error){
			$.toast(json.error.message);
			console.error(json.error);
		}
	},

	input(e, key) {
		this.query[key] = e.value;
	},

	search() {
		this.query.page = 1;
		this.get_list();
	},

	// 改变分类标签
	changeScreen(idx,key) {
		if (this.query[key] === "全部") {
			this.query[key] = "";
		}
		this.search()
	},

	// 控制排序
	handleOrderby(o) {
		// console.log(o);
		// 取出对应的orderby

		// 重置其他排序的direction
		this.list_orderby.map(val => {
			if (val.name !== o.text) {
				return val.direction = ""
			}
		})

		// 找到对应的排序项，发送排序请求
		var obj_orderby = this.list_orderby.find(val => val.name === o.text)
		if (o.direction === "") {
			this.query.orderby = ""
			this.search()
		} else if (o.direction === "up") {
			this.query.orderby = obj_orderby.command_desc
			this.search()
		} else if (o.direction === "down") {
			this.query.orderby = obj_orderby.command_asc
			this.search()
		}
	},

	/**
	 * 跳转地址
	 * @param {Object} id
	 */
	to_nav(id) {
		this.$nav('/pages/pet_goods/details?pet_goods_id=' + id)
	},

	},
	created() {
		// 初始化适用宠物列表
		this.get_list_suitable_for_pets();
	}
	}
</script>

<style scoped>
	.container{
		box-shadow: none;
		-webkit-box-shadow: none;
	}
	.pager {
		margin-top: 1rem;
	}
	.uni-collapse {
		background-color: inherit;
	}

	.pager {
		margin-top: 1rem;
	}

	.tab_view {
		background-color: #FFFFFF;
		margin: 0 auto;
	}


	.list_orderby {
		display: flex;
		justify-content: flex-end;
		background-color: #FFFFFF;
		border-top: 5px double #ccc;
		border-bottom: 5px double #ccc;
		margin-right: -1px;
	}

	.list_orderby .bar_orderby {
		border-left: 1px solid #ccc;
	}
	.change_table{
		height: 50px;
		margin: 0 var(--margin_base)
	}
	.btn_change_table{
		margin-left: auto;
		font-weight: bold;
		width: 100px;
		height: 37px;
		text-align: center;
		font-size: 0.875rem;
		border: 1px solid #CCCCCC;
		border-radius: 1rem;
		margin: 0.25rem;
		float: right;
	}
	.end-title{
		display: flex;
	}
	.end-title view{
		flex-grow: 1;
		text-align: center;
	}
	.end-cont{
		display: none;
		background: #C8C7CC;
	}
	.btna{
		color: #FFFFFF;
		background: #00A0FF;
	}
	.dis{
		display: block;
	}
	.box_style{
		margin-bottom: 0.75rem;
		padding: 0.375rem;
		display: inline-block !important;
		border: 0.075rem solid #ccc;
		border-radius: 0.375rem;
		overflow: hidden;
	}
	.box_style:nth-child(even){
		margin-left: 0.60rem;
	}
	.box_style:nth-child(even){
		margin-left: 0.60rem;
	}
	.bottom-view,.create_time_block{
		font-size: 12px;
		color: #666666;
	}
	.bottom-view view{
		display: inline-block;
	}
	.bottom-view span{
		margin-left: 5px;
		margin-right: 10px;
	}
</style>
